<template>
	<view class="confirm">
		<view class="confirm-bg"></view>
		
		<view class="confirm-content">
			<view class="navbar" :style="{ paddingTop: systemBarHeight + 'px' }">
				<uni-nav-bar left-icon="left" :title="title" color="#ffffff" backgroundColor="transparent" :border="false" @clickLeft="back"/>
			</view>
			
			<view class="info">
				<view class="status">
					<image :src="setIcon(status)"></image>
					<text class="tip1">{{ setResult(status) }}</text>
				</view>
				<text class="tip2"> {{ setText(status) }}</text>
			</view>
			
			<view class="form">
				<u--form labelPosition="left" :model="model" ref="uForm" :labelWidth="200">
					<u-form-item label="所有人" prop="name" borderBottom required>
						<u--input v-model="model.name" border="none" inputAlign="right" disabled disabledColor="#FFFFFF"></u--input>
					</u-form-item>
					<u-form-item label="车牌号码" prop="number" borderBottom required>
						<u--input v-model="model.number" border="none" inputAlign="right" disabled disabledColor="#FFFFFF"></u--input>
					</u-form-item>
					<u-form-item label="VIN码" prop="vin" borderBottom required>
						<u--input v-model="model.vin" border="none" inputAlign="right" disabled disabledColor="#FFFFFF"></u--input>
					</u-form-item>
					<u-form-item label="审核状态" prop="status" borderBottom v-if="status !== 0 ">
						<u--input 
							v-model="model.status" 
							border="none" 
							inputAlign="right" 
							suffixIcon="arrow-right" 
							suffixIconStyle="font-size: 20px;color: rgba(#000000, .9)"
							disabled
							disabledColor="#FFFFFF"
						>
						</u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		
		<view class="confirm-bottom" v-if="status !== 2">
			<!--审核中不能更换行驶证-->
			<u-button text="更换行驶证" color="#CF1A1B" @click="handleSubmit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0, // 系统状态栏的高度
				model: {
					name: '',
					number: '',
					vin: '',
					status: ''
				},
				title: '车辆认证',
				status: 0
			};
		},
		created() {
			this.getSysteminfo()
			this.getCarInfo()
		},
		computed: {
			setStatus() {
			  return function(status) {
			    if(status === -1) {
			      return '认证失败'
			    } else if(status === 0) {
			      return '未认证'
			    } else if(status === 1) {
			      return '已认证'
			    } else if(status === 2) {
			      return '审核中'
			    } else {
			      return ''
			    }
			  }
			},
			setIcon() {
				return function(status) {
					if(status === -1) { // 认证失败
						return 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/icon_fail.png'
					} else if(status === 1) { // 已认证
						return 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/icon_success.png'
					} else if(status === 2) { // 审核中
						return 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/car/icon_ing.png'
					} else {
						return ''
					}
				}
			},
			setResult() {
				return function(status) {
					if(status === -1) { // 认证失败
						return '认证不通过'
					} else if(status === 1) { // 已认证
						return '已认证'
					} else if(status === 2) { // 审核中
						return '审核中'
					} else {
						return ''
					}
				}
			},
			setText() {
				return function(status) {
					if(status === -1) { // 认证失败
						return '您的行驶证申请审核不通过，请修改后再次提交'
					} else if(status === 1) { // 已认证
						return '您的行驶证认证申请审核通过'
					} else if(status === 2) { // 审核中
						return '您的行驶证认证申请正在审核中'
					} else {
						return ''
					}
				}
			}
		},
		methods: {
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			async getCarInfo(){
				uni.showLoading({
				  title: '加载中...'
				})
				const res = await this.$request({
					method: 'GET',
					url: '/terminal-serve-center/merchant-car/user/cert'
				})
				let result = res.datas
				this.status = res.datas.state
				this.model.name = result.veLicenceOwner
				this.model.number = result.plateNum
				this.model.vin = result.vin
				this.model.status = this.setStatus(result.state)
				uni.hideLoading()
			},
			handleSubmit () {
				uni.navigateTo({
				    url: '/indexPack/car/authenticate'
				});
				uni.setStorageSync('authSource', 'personalConfirm')
			}
		}
	}
</script>

<style lang="scss" scoped>
.confirm {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	
	&-bg {
		height: 245px;
		width: 100%;
		position: absolute;
		z-index: 1;
		background-image: linear-gradient(#EE3B3B, #CF1A1B);;
	}
	&-content {
		z-index: 99;
		height: 100%;
		position: relative;
		.navbar {
			/deep/ .uni-icons {
				font-size: 24px !important;
			}
		}
		.info {
			height: 111px;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.tip1 {
				font-size: 44rpx;
			}
			.tip2 {
				font-size: 28rpx;
				margin-top: 46rpx;
			}
			.status {
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 31px;
					height: 31px;
					margin-right: 20rpx;
				}
			}
		}
		.form {
			height: auto;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 20rpx;
			/deep/ .u-form{
				margin: 0 20px;
				padding-bottom: 20px;
			}
			/deep/ .u-form-item__body {
			    margin-left: 10px;
			}
		}
	}
	
	&-bottom {
		height: 70px;
		width: 100%;
		z-index: 99;
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		/deep/ .u-button {
			width: 90% !important;
		}
	}
}
</style>
